<!--
*                             _ooOoo_
*                            o8888888o
*                            88" . "88
*                            (| -_- |)
*                            O\  =  /O
*                         ____/`-&#45;&#45;'\____
*                       .'  \\|     |//  `.
*                      /  \\|||  :  |||//  \
*                     /  _||||| -:- |||||-  \
*                     |   | \\\  -  /// |   |
*                     | \_|  ''\-&#45;&#45;/''  |   |
*                     \  .-\__  `-`  ___/-. /
*                   ___`. .'  /&#45;&#45;.&#45;&#45;\  `. . __
*                ."" '<  `.___\_<|>_/___.'  >'"".
*               | | :  `- \`.;`\ _ /`;.`/ - ` : | |
*               \  \ `-.   \_ __\ /__ _/   .-` /  /
*          ======`-.____`-.___\_____/___.-`____.-'======
*                             `=-&#45;&#45;='
*          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
*                     佛祖保佑        永无BUG
*            佛曰:
*                   写字楼里写字间，写字间里程序员；
*                   程序人员写程序，又拿程序换酒钱。
*                   酒醒只在网上坐，酒醉还来网下眠；
*                   酒醉酒醒日复日，网上网下年复年。
*                   但愿老死电脑间，不愿鞠躬老板前；
*                   奔驰宝马贵者趣，公交自行程序员。
*                   别人笑我忒疯癫，我笑自己命太贱；
*                   不见满街漂亮妹，哪个归得程序员？
-->
<script>
import {axiosLogin, axiosRegister} from "../api";
import {
  getAccountStorage,
  getLoginStorage,
  setAccountStorage,
  setLoginStorage,
  setPasswordStorage
} from "../saves/sessionStorage";

export default {
  name: "account",
  data() {
    return {
      switchLogin: true,
      userName: "",
      userAccount: "",
      userPassword: "",
      dialogVisible: false,
      dialogInfo:""
    }
  },
  methods: {
    change() {
      this.switchLogin = !this.switchLogin;
    },
    async userRegister(username, account, password) {
      let result = await axiosRegister({username, account, password});
      if (result.status === 200) {
        if (result.data === "Normal") {
          this.dialogInfo = "注册成功";
          this.dialogVisible = true;
        }
        else if(result.data === "RepeatError"){
          this.dialogInfo = "账号已被注册，请换个账号";
          this.dialogVisible = true;
        }
        else{
          this.dialogInfo = "信息错误，无法注册";
          this.dialogVisible = true;
        }
      } else {
        this.dialogInfo = "服务器错误";
        this.dialogVisible = true;
      }
    },
    async userLogin(account, password) {
      let result = await axiosLogin({account,password});
      if (result.status === 200){
        if (result.data === "Normal"){
          console.log(result.data);
          this.dialogInfo = "登录成功";
          this.dialogVisible = true;
        }else if(result.data === "DataFormatError" || result.status === "UnknownError" ){
          this.dialogInfo = "密码或者账号错误";
          this.dialogVisible = true;
        }else if(result.data === "EmptyInfoError"){
          this.dialogInfo = "账号或者密码为空";
          this.dialogVisible = true;
        }else if(result.data === "AOPInfoError"){
          this.dialogInfo = "账号未注册";
          this.dialogVisible = true;
        }
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    handleEnter(){
      this.dialogVisible = false;
      if (this.dialogInfo==="注册成功" || this.dialogInfo==="登录成功"){
        setLoginStorage(true);
        setAccountStorage(this.userAccount);
        setPasswordStorage(this.userPassword);
        this.account = getAccountStorage();
        this.isLogin = getLoginStorage();
        this.$router.push({name: "personInfo"});
        this.$router.go(0);
      }
    }
  },
}
</script>

<template>
  <div class="account">
    <el-dialog
        :before-close="handleClose"
        :visible.sync="dialogVisible"
        title="提示"
        width="30%">
      <span>{{ dialogInfo }}</span>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="handleEnter">确 定</el-button>
  </span>
    </el-dialog>
    <div class="container">
      <div class="box">
        <div class="inner-box">
          <div class="forms-wrap">
            <!--登录表单-->
            <transition
                appear
                enter-active-class="animate__fadeInLeft"
                leave-active-class="animate__fadeOutRight"
                name="animate__animated animate__bounce"
            >
              <form v-show="switchLogin" class="login-form" onsubmit="return false">
                <div class="title">
                  <p>登录</p>
                </div>
                <div class="head">
                  <p>欢迎回来</p>
                  <span>没有账号？</span>
                  <a class="login" @click="change">立刻注册</a>
                </div>
                <div class="actual-from">
                  <div class="input-wrap">
                    <!--minlength最小输出长度，autocomplete允许浏览器自动输入或者禁止复制粘贴,required是防止未输入该输入框就提交表单-->
                    <input id="login_account" autocomplete="off" class="input-field" minlength="6" placeholder="账号" required
                           type="text" v-model="userAccount">
                    <label for="login_account"></label>
                  </div>
                  <div class="input-wrap">
                    <input id="login_password" autocomplete="off" class="input-field" placeholder="密码" required
                           type="password" v-model="userPassword">
                    <label for="login_password"></label>
                  </div>
                  <button class="login-btn" @click="userLogin(userAccount,userPassword)">登录</button>
                </div>
              </form>
            </transition>
            <!--注册表单-->
            <transition
                appear
                enter-active-class="animate__fadeInLeft"
                leave-active-class="animate__fadeOutRight"
                name="animate__animated animate__bounce"
            >
              <form v-show="!switchLogin" onsubmit="return false" class="register-form">
                <div class="title">
                  <p>注册</p>
                </div>
                <div class="head">
                  <p>欢迎您</p>
                  <span>已有账号？</span>
                  <a class="login" @click="change">立刻登录</a>
                </div>
                <div class="actual-from">
                  <div class="input-wrap">
                    <input id="register_username" v-model="userName" class="input-field" placeholder="请输入您的昵称" required
                           type="text">
                    <label for="register_username"></label>
                  </div>
                  <div class="input-wrap">
                    <!--minlength最小输出长度，autocomplete允许浏览器自动输入或者禁止复制粘贴,required是防止未输入该输入框就提交表单-->
                    <input id="register_account" v-model="userAccount" autocomplete="off" class="input-field"
                           minlength="6" placeholder="请输入您的账户名" required type="text">
                    <label for="register_account"></label>
                  </div>
                  <div class="input-wrap">
                    <input id="register_password" v-model="userPassword" autocomplete="off" class="input-field"
                           placeholder="请输入您的密码" required type="password">
                    <label for="register_password"></label>
                  </div>
                  <button class="login-btn" @click="userRegister(userName,userAccount,userPassword)">注册</button>
                </div>
              </form>
            </transition>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped src="../style/userAccount.css">

</style>